@extends("admin.layout.main")

@section("content")
    <style>
        .demo-img{
            max-width: 100%;
            max-height:100%;
        }
    </style>
    <div id="app" style="width: 100%">
        <Modal
                v-model="pic_modal"
                title="大图"
                >
            <p>
                <img :src="img" style="width: 100%">
            </p>

        </Modal>

        <Modal width="30%" title="反馈回复" v-model="answerModal" @on-ok="answerFeedback">
            <span>
                <i-input v-model="id" disabled></i-input>
            </span>
            <span>
                回复：
                <i-input type="textarea" v-model="answer" :rows="4"></i-input>
            </span>
        </Modal>
        {{--主体代码--}}
        <Row type="flex" justify="center" align="middle">

            <i-col span="24" >
                <span>
                    开始时间:
                     <Date-Picker type="datetime"  placeholder="选择时间" v-model="start_time"></Date-Picker>
                </span>
                <span>
                    &nbsp&nbsp结束时间:
                     <Date-Picker type="datetime"  placeholder="选择时间" v-model="end_time"></Date-Picker>
                </span>

                <span>
                     <i-button type="primary"  @click="getList">搜索</i-button>
                </span>
            </i-col>

        </Row>
        <Row  justify="center" align="middle" >
            <i-col  style="margin-top: 20px;width: 100%">
                <i-table size="large"   :data="tableData" :columns="tableColumns" >

                </i-table>
            </i-col>
        </Row>

        <Row type="flex" justify="center" class="code-row-bg">
            <i-col>
                <Page
                        size="small"
                        :total="page.total"
                        :current="page.current"
                        :page-size="page.pageSize"
                        show-total
                        show-elevator
                        @on-change="getList">

                </Page>
            </i-col>
        </Row>



    </div>
    <script src="/js/layer/layer.js"></script>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data(){
                return {
                    token:'',
                    pic_modal:false,
                    img:'',
                    answerModal:false,
                    answer:'',
                    id:'',
                    tableColumns: [
                        {
                            title: '图片',
                            width:250,
                            render: (h,params) => {
                                let row = params.row;
                                let imgs = JSON.parse(row.imgs);
                                let img_arr = [];
                                for(let i=0;i<imgs.length;i++){
                                    let img = imgs[i];
                                    img_arr.push(
                                        h('img',{
                                            style:{
                                                'margin':'5px',
                                                'max-width':'50px',
                                                'max-height':'50px',
                                                'cursor': 'pointer',
                                            },
                                            attrs:{
                                                'src': img,
                                            },
                                            on:{
                                                click:(e)=>{
                                                    this.handleView(img)
                                                }
                                            }
                                        })
                                    );
                                }
                                return h('div',img_arr)

                            }

                        },

                        {
                            title: '姓名',
                            key: 'name'
                        },
                        {
                            title: '问题',
                            key: 'question'
                        },
                        {
                            title: '订单号',
                            key: 'order_id'
                        },
                        {
                            title: '店铺',
                            key: 'shop'
                        },
                        {
                            title: '电话',
                            key: 'tel'
                        },
                        {
                            title: '昵称',
                            key: 'nickname'
                        },
                        {
                            title: '回复',
                            key: 'answer'
                        },
                        {
                            title: '提交时间',
                            key: 'created_at'
                        },
                        {
                            title: "操作",
                            key: 'action',
                            render: (h, params) => {
                                return h('div', [
                                    h('i-button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            'click': ()=>{
                                                this.answerModal    =   true;
                                                this.id =   params.row.id;
                                                this.answer =   params.row.answer;
                                            }
                                        }
                                    }, "回复")
                                ]);

                            }
                        },
                        {
                            title: '是否阅读',
                            key: 'is_read',
                            render: (h, params) => {
                                if(params.row.read == 0 && params.row.answer != ''){
                                    return h('div',[
                                        h('span', {
                                            style: {
                                                color: 'red'
                                            },
                                        }, "用户未读")
                                    ]);
                                }

                            }
                        },
                    ],
                    page: {
                        total: 0,
                        current: 1,
                        pageSize: 20,
                    },
                    tableData: [],
                    start_time: '',
                    end_time:''

                }
            },
            mounted() {
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods:{
                handleView(img){
                    this.img = img
                    this.pic_modal = true
                },

                getList(page){
                    start_time = ''
                    end_time = ''
                    if(this.start_time){
                        start_time = this.turnTimeObjToStr(this.start_time)
                    }
                    if(this.end_time){
                        end_time = this.turnTimeObjToStr(this.end_time)
                    }
                    axios.get('/admin/feedback/list', {
                        params: {
                            token:vm.token,
                            page: page,
                            start_time:start_time,
                            end_time:end_time
                        }
                    }).then((response) => {
                        vm.tableData = response.data.result.data;
                        vm.page.total = response.data.result.total;
                        vm.page.current = response.data.result.current_page;
                    })
                },
                //根据时间对象获取时间字符串
                turnTimeObjToStr(preDate){
                    var year = preDate.getFullYear();
                    var month = preDate.getMonth()+1;
                    if(month < 10){
                        month = '0'+ month;
                    }
                    var day = preDate.getDate();
                    if(day < 10){
                        day = '0'+ day;
                    }
                    h = preDate.getHours();// 小时
                    m = preDate.getMinutes(); // 分
                    s = preDate.getSeconds(); // 秒

                    if(h < 10){
                        h = '0'+h;
                    }
                    if(m < 10){
                        m = '0'+m;
                    }
                    if(s < 10){
                        s = '0'+s;
                    }
                    let time = year + '-' + month + '-' + day +' '+h+':'+m+':'+s;
                    return time;
                },
                answerFeedback(){
                    axios.get('/admin/feedback/answer', {
                        params: {
                            token:vm.token,
                            id: this.id,
                            answer:this.answer,
                        }
                    }).then((response) => {
                        vm.$Message.success(response.data.msg);
                        vm.getList(1);
                    })
                }

            },

        });

        vm.token = getToken();
        vm.getList(1);
    </script>

@endsection

